<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testFormData</title>
</head>
<body>
<!--表单-->
<form id="loginForm">
    <input id="name" type="text" name="name" value="zxs" placeholder="Your Name">
    <input id="email" type="email" name="email" value="120851063@qq.com" placeholder="Your Email">
    <input type="checkbox" name="hobby" value="ball"/>足球
    <input type="checkbox" name="hobby" value="go"/>围棋
    <input type="checkbox" name="hobby" value="swing"/>游水
    <input type="submit" value="Submit">
</form>

<!--下面是所有的脚本代码-->
<script>
    function execute() {
        console.log("execute()");
        const loginForm = document.getElementById('loginForm');

        class Utils {
            constructor() {

            }

            /**
             *
             * @param map
             * @returns {{}} 返回对象
             */
            static mapToObject(map) {
                const obj = {};
                if (undefined == map || null == map) {
                    return obj;
                }
                if (0 === map.size) {
                    return obj;
                }
                // 创建对象
                map.forEach((value, key) => {
                    obj[key] = value;
                });
                return obj;
            }
        }

        let execute = false;
        // execute = true;
        // 执行注册
        if(execute) {
            console.log("代码块1")
            function submitFun(event) {
                console.log("submitFun()");

                event.preventDefault();
                const formData = new FormData(loginForm);
                console.log(formData);

                // const inputName = formData.get("name");
                // const inputEmail = formData.get("email");
                // const hobby = formData.get('hobby');
                //
                // console.log("execute() inputName:",inputName + ",inputEmail:",inputEmail)
                //
                // console.log("execute() hobby:",hobby)

                // loginForm.getElementsByTagName('input');
                // formData.append('name',inputName);
                // formData.append('email',inputEmail);


                const map = new Map();
                // const
                for (let [key, value] of formData.entries()) {
                    // 这边key可有重复的
                    // selectedValues.push({key,value});
                    const locSelectedValues = [];
                    if (map.has(key)) {
                        let v = map.get(key);
                        if (Array.isArray(v)) {
                            v.push(value);
                        } else {
                            locSelectedValues.push(v);
                            locSelectedValues.push(value);
                            map.set(key, locSelectedValues);
                        }
                    } else {
                        map.set(key, value);
                    }
                }
                // 新的的对象
                const obj = {};
                map.forEach((value, key) => {
                    obj[key] = value;
                });
                console.log(obj);
            }
            loginForm.addEventListener('submit', submitFun);
        }


        execute = true;
        // 执行注册
        if(execute) {
            console.log("代码块2")
            function submitFun(event) {
                console.log("submitFun()");

                event.preventDefault();
                const formData = new FormData(loginForm);
                console.log(formData);
                const map = new Map();
                // const
                for (const [key, value] of formData.entries()) {
                    // 这边key可有重复的
                    // selectedValues.push({key,value});

                    // 没有相同的键: 值，直接存入
                    if (!map.has(key)){
                        map.set(key, value);
                        continue;
                    }

                    // 有相同的键: 值-执行下面的流程，直接存入
                    // 其实和上面是互斥的，但是为了代码清晰
                    if (map.has(key)) {
                        let v = map.get(key);
                        if (Array.isArray(v)) {
                            // 直接执行push操作
                            v.push(value);
                        } else {
                            // 构建数组对象
                            const locSelectedValues = [];
                            // 数组对象(这边代码只会执行1次)
                            locSelectedValues.push(v);
                            locSelectedValues.push(value);
                            map.set(key, locSelectedValues);
                        }
                        continue;
                    }
                }

                const obj = Utils.mapToObject(map);
                console.log("end");
                console.log("obj:",obj);
            }
            loginForm.addEventListener('submit', submitFun);
        }
    }


    execute();
</script>
</body>
</html>